-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat : double-click to open/close block in List View #64641
base: trunk
Are you sure you want to change the base?
Feat : double-click to open/close block in List View #64641
Conversation
component ListViewBlock to expand and collapse
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for putting up a PR @nirav7707! For folks who might not be familiar with the feature it can be helpful to add some testing instructions or a screengrab to the PR description to help anyone looking at the PR to know what to look for or test. Even a simple PR can sometimes be a bit tricky to review given the complexity of Gutenberg.
In practice this is testing well for me in the editor, here's a quick video:
2024-08-22.09.58.17.mp4
I've added the "Needs Design Feedback" label as it'd be good to get feedback from designers on the desired behaviour of double clicking a list view item. I remember a while back there was some discussion surrounding using a double click to trigger renaming a block, and once we pick a particular behaviour for double click, it might be hard to change it after the fact as folks will have come to expect whichever direction we go with.
One other thing to consider is that when you first click a block in the list view, it will select the block and redirect focus to the editor canvas. Clicking the block again will then shift focus to the list view. However, with double click behaviour added, it's possible that sometimes folks might be attempting to direct focus to the list view and could (potentially) find it unexpected if a list item is expanded or collapsed?
That might not be an issues at all in practice, though, just a thought.
Let's see what some designers think!
Thanks for the PR! I could go either way on this one. My only reservation is that once we apply double-click to open/close, we won't be able to apply doubleclick for anything else, such as scroll to the block in question or even open the rename block modal. If we're sure open/close is the best use of this gesture, can work. |
Personally I would expect a double-click to invoke renaming. |
This is just one idea, but considering that double-clicking might be used for other functions such as renaming in the future, what do you think about the approach of "expanding if the selected block is single-clicked"? diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index f4dcf8caef..ea047ba308 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -546,7 +546,13 @@ function ListViewBlock( {
<div className="block-editor-list-view-block__contents-container">
<ListViewBlockContents
block={ block }
- onClick={ selectEditorBlock }
+ onClick={ ( event ) => {
+ if ( isSelected ) {
+ toggleExpanded( event );
+ } else {
+ selectEditorBlock( event );
+ }
+ } }
onContextMenu={ onContextMenu } a694f85e8abae2a4e554f6847280b889.mp4 |
That could potentially interfere with multiselecting. I.e. maybe you'll select a group, hold shift, and then select another block farther down the list. |
@jasmussen Right, it's prevent deselection of block once we have selected multiple blocks by holding shift. we have to click somewhere inside the block previewer. multiselect.mov |
By adding bool variable
Screen.Recording.2024-08-22.at.3.58.57.PM.mov |
I'd rather double-click to rename, as that's a much more difficult task to complete than to open/close a block. Does this effort block that potential in the future? |
By the way, I think there are three actions to rename a directory in Mac OS, Am I right?
In Windows OS, there are three actions for renaming:
The reason I want to confirm this is because adding a shortcut for renaming is requested in #62152, and if we can implement a shortcut for renaming, we might be able to proceed with this PR. |
You can also double-click. |
I have myself gone a bit forth and back on this feature. It would likely be useful to check into other software that would do something similar and compare. (Besides OSX that is.) |
It might be good to research and discuss this point first. I believe the unintended behavior when multiple blocks are selected can be addressed by checking whether a modifier key is pressed, or by checking the value of |
What?
resolve #64625
Why?
To enhance accessibility
How?
Registering the doubleClick event listener to
ListViewBlock
component